

import { GetNode, ListConvertersOfNode, ListSerialsOfNode } from "~/lib/server";
import type { Route } from "./+types/node";
import { ActionButton, Disclosure, DisclosurePanel, DisclosureTitle } from "@adobe/react-spectrum";



export default function Node({ params, loaderData }: Route.ComponentProps) {

    const { data: node, error: nodeErr, isLoading: nodeIsLoading } = GetNode(params.nodeId);

    const { data: converters, error: convertersErr, isLoading: convertersIsLoading } = ListConvertersOfNode(params.nodeId)
    const { data: serials, error: serialsErr, isLoading: serialsLoading } = ListSerialsOfNode(params.nodeId)

    return (
        <>
            {node &&
                <div >

                    <h2 className="my-2 text-3xl">网关({node.name})</h2>


                    {
                        serials &&
                        <div>
                            <h3>串口地址</h3>
                            <div className="flex flex-col sm:flex-row gap-4">
                                {serials.map((item) => (

                                    <SerialCard serial={item} key={item.id} />
                                ))}
                            </div>
                        </div>
                    }

                    {
                        converters &&
                        <div>
                            <h3>转换器</h3>
                            <div className="flex flex-col sm:flex-row gap-4">
                                {converters.map((item) => (

                                    <ConverterCard converter={item} key={item.id} />
                                ))}
                            </div>
                        </div>
                    }

                </div>
            }
        </>


    );
}

function SerialCard({ serial }: { serial: Serial }) {

    return (

        <div className="w-16 bg-white shadow-md rounded px-4 py-2 hover:bg-gray-100">
            {/* <svg className="w-6 h-6 mr-2"></svg> */}
            <p className="text-lg">{serial.addr}</p>

        </div >

    );

}

function ConverterCard({ converter }: { converter: Converter }) {


    const converterTypes: ConverterType[] = [
        { id: 1, name: "CAN - IO", img: 1 },
        { id: 2, name: "CAN - 485", img: 5 },
        { id: 3, name: "CAN - 继电器", img: 66 },
        { id: 4, name: "LORA - IO", img: 12 },
        { id: 5, name: "LORA - 485", img: 12 },
        { id: 6, name: "LORA - 继电器", img: 12 },
    ];


    const t = converterTypes.find((i) => i.id == converter.type);

    return (

        <>
            {t &&
                <div className="w-40 bg-white shadow-md rounded px-4 py-2 hover:bg-gray-100">
                    {/* <svg className="w-6 h-6 mr-2"></svg> */}
                    <h3 className="font-bold text-base mb-2">{converter.name}</h3>
                    <p className="text-gray-700 text-base">{t.name}</p>


                </div >
            }
        </>
    );
}






